import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-gauge',
  templateUrl: './gauge.component.html',
  styleUrls: ['./gauge.component.scss']
})
export class GaugeComponent implements OnInit {
  option: any;

  option2: any;

  constructor() {
  }

  ngOnInit() {

    this.option = {
      tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
      },
      series: [
        {
          name:'业务指标',
          type:'gauge',
          //center: ['25%','55%'],
          splitNumber: 10,       // 分割段数，默认为5
          axisLine: {            // 坐标轴线
            lineStyle: {       // 属性lineStyle控制线条样式
              color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
              width: 8
            }
          },
          axisTick: {            // 坐标轴小标记
            splitNumber: 10,   // 每份split细分多少段
            length :12,        // 属性length控制线长
            lineStyle: {       // 属性lineStyle控制线条样式
              color: 'auto'
            }
          },
          axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              color: 'auto'
            }
          },
          splitLine: {           // 分隔线
            show: true,        // 默认显示，属性show控制显示与否
            length :30,         // 属性length控制线长
            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
              color: 'auto'
            }
          },
          pointer : {
            width : 5
          },
          itemStyle: { //仪表盘指针样式
            normal: {
              color: '#c2cbd6',
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          title : {
            show : true,
            offsetCenter: [0, '-40%'],       // x, y，单位px
            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: 'bolder'
            }
          },
          detail : {
            formatter:'{value}%',
            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              color: 'auto',
              fontWeight: 'bolder'
            }
          },
          data:[{value: 50, name: '完成率'}]
        },
      ]

    };

    this.option2 = {
      series: [
        {
          name: '业务指标',
          type: 'gauge',
          min: 0,
          max: 100,
          startAngle: 180, //表盘的开始角度
          endAngle: 0, // 表盘的结束角度
          splitLine: {
            show: false // 显示分隔线
          },
          axisLine: {            // 坐标轴线
            show: true,        // 默认显示，属性show控制显示与否
            lineStyle: {       // 属性lineStyle控制线条样式
              color: [[0.5, '#70ad47'],[0.8, '#fab322'],[1, '#ff0000']],
              width: 20
            }
          },
          axisTick: {
            show: false // 不显示刻度
          },
          axisLabel: {
            show: false // 不显示刻度标签
          },
          pointer: {
            width: 3,
            length: '90%'
          },
          //指针样式
          itemStyle: {
            normal: {
              color: '#000000'
            }
          },
          markPoint: {
            symbol: 'circle'
          },
          markLine: {
            symbol: 'circle'
          },
          // 数据显示
          detail: {
            formatter: '{value}%'
          },
          data: [
            {
              value: 50,
              name: ''
            }
          ]
        }
      ]

    };

    setInterval(function () {
      this.option.series[0].data[0].value = (Math.random() * 100).toFixed(2);
      //myChart.setOption(this.option, true);
    }, 2000);

  }

}
